<template>
  <div class="channel-box">
    <div class="partition">
      <Partition></Partition>
    </div>
    <div class="channel-header">
      <div class="channel-header-title">
        {{ currentPartitionName }}
      </div>
    </div>
    <MoreVideoList :video-info-list="videoList" :loading="isLoading"></MoreVideoList>
    <div class="page-bar">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageParams.pageSize" @change="changeCurrentPage"/>
    </div>
  </div>


</template>
<script setup>
import Partition from "@/components/Partition.vue";
import {useRoute} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {getPartitionName, getVideoListByPartitionId} from "@/api/api.js";
import MoreVideoList from "@/components/MoreVideoList.vue";
import emitter from "@/utils/emitter.js";

const route = useRoute();
const currentPartitionName = ref()
const pageParams = reactive({
  page:1,
  pageSize:10
})
const isLoading = ref(true)
const total = ref(0)
const changeCurrentPage = async (curPage,pageSize) => {
  console.log(curPage)
  pageParams.page = curPage
  const res1 = await getVideoListByPartitionId(route.query.pId,pageParams)
  console.log(res1)
  videoList.value = res1.data.records
  total.value = res1.data.total
  console.log(videoList.value)
  if(res1.data.records.length !== 0){
    isLoading.value = false
    videoList.value = res1.data.records
  }
}

onMounted(async () => {

  // 获取分区标题
  const res = await getPartitionName(route.query.pId)
  currentPartitionName.value = res.data
  await getData(route.query.pId)
  emitter.on("changeChannel", async ({pId,pName}) => {
    pageParams.page = 1
    pageParams.pageSize = 5
    currentPartitionName.value = pName
    await getData(pId)
  })


})
const getData = async (pId) => {
  let completed = false
  // 获取分区得到的视频列表
  setTimeout(()=>{
    if(completed){
      isLoading.value = false
    }
  },100)
  const res1 = await getVideoListByPartitionId(pId,pageParams)
  console.log(res1)
  videoList.value = res1.data.records
  total.value = res1.data.total
  console.log(videoList.value)
  completed = true
  if(res1.data.records.length !== 0){
    videoList.value = res1.data.records
  }
}

// 视频列表
const videoList = ref()

</script>
<style lang="scss" scoped>
.channel-box{
  padding: 2% 4.5%;
}
.partition{
  width: 1380px;
}
.channel-header{
  width: 1380px;
  .channel-header-title{
    font-size: 28px;
    color: #333;
    padding-left: 20px;
    border-left: 4px solid #e60012;
    line-height: 20px;
    margin: 20px 0;
  }
}
.page-bar{
  width: 80%;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>